{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}

{% block title %}Unity 3D{% endblock %}
{% block page_content %}
<div class="page-header">
    <div style="width:450px; display: inline-block">
        <canvas id="chart-area1" style="color: black"/>
    </div>
    <div style="width:40%; display: inline-block; margin-left: 60px">
        <div id="vmap" style="width: 600px; height: 445px; text-align: center">
            <span style="font-size: 28px;font-weight: bold; color: black">Machine Location</span></div>
    </div>
    {% if current_user.is_authenticated %}

    {% endif %}
</div>
<div>
    {% if current_user.can(Permission.WRITE_ARTICLES) %}
    {{ wtf.quick_form(form) }}
    {% endif %}
</div>
{% include '_posts.html' %}
{% if pagination %}
<div class="pagination">
    {{ macros.pagination_widget(pagination, '.index') }}
</div>
{% endif %}
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='Chart.js-2.5.0/dist/Chart.bundle.js') }}"></script>
<script src="{{ url_for('static', filename='Chart.js-2.5.0/dist/utils.js') }}"></script>

<script src="{{ url_for('static', filename='jqvmap/dist/jquery.vmap.js') }}"></script>
<script src="{{ url_for('static', filename='jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script src="{{ url_for('static', filename='jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<script>
    var machine_info = []
    function myInterval(){
        $.getJSON("/online-machines", { cmd: 'machine_info'},
        function (data) { 
            var ready_machines = 0;
            var assigned_machines = 0;
            var done = 0;
            var fault_machines = 0;
            for(var i = 0;i<data.length;i++){
                if(data[i]['state'] == 'ready'){
                    ready_machines++;
                }
                else if(data[i]['state'] == 'assigned'){
                    assigned_machines++;
                }
                else if(data[i]['state'] == 'done'){
                    done++;
                }
                else {
                    fault_machines++;
                }
            }
            machine_info[0] = ready_machines;
            machine_info[1] = assigned_machines;
            machine_info[2] = done;
            machine_info[3] = fault_machines;
            if(data.length==0){
                machine_info[0] = 4;
                machine_info[1] = 2;
                machine_info[2] = 3;
                machine_info[3] = 1;
            }
            piechart_online_machines.update();

         });
    }
    $(window).ready(function () {
        setInterval("myInterval()", 1000);
    });

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: machine_info,
                backgroundColor: [
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.orange,
                    window.chartColors.red,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "ready",
                "working",
                "done",
                "fault"
            ]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                fontSize: 28,
                text: 'Online Machine Status',
                fontColor: '#000'
            }
        }
    };
    var ctx1 = document.getElementById("chart-area1").getContext("2d");
    var piechart_online_machines = new Chart(ctx1, config);

    function escapeXml(string) {
        return string.replace(/[<>]/g, function (c) {
        switch (c) {
            case '<': return '\u003c';
            case '>': return '\u003e';
        }
        });
    }
    var pins = {
      cn: escapeXml('<div id="heartbeat" class="red" style="text-align: center; position: absolute; ">' +
                        '<span style="font-size: 40px; color: yellow; ">•</span>' +
                        '<span style="font-size: 40px; color: yellow; margin-top:-35px; margin-left:-2px; position:absolute;">•</span>' +
                    '</div>')
    };
    var i = jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: null,
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: false,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        values: sample_data,
        normalizeFunction: 'polynomial',
        pins: pins,
        pinMode: 'content'
    });
    $("#heartbeat").css({"-webkit-animation":"twinkling 1s infinite ease-in-out"});
</script>
{% endblock %}
